<template>
	<view >
		<!-- 搜索 -->
		<view style="margin-top: 10px;">
			<my-search />
		</view>
		<!-- 分类 -->
		<view class="category">
			   <navigator  class="cate-item" url="../category/category">
				             <image src="https://img.tukuppt.com/png_preview/00/50/04/Qpphv5evAm.jpg%21/fw/780"     mode="widthFix"></image>
				             <text>童装</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img0.baidu.com/it/u=3984556372,1980936217&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1680109200&t=8ae5dd795060936a2a23481795c423c1" mode="widthFix"></image>
			   				  <text>童车出行</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img1.baidu.com/it/u=3246102726,821471293&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=376" mode="widthFix"></image>
			   				  <text>儿童洗护</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img0.baidu.com/it/u=2777006526,1184705975&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" mode="widthFix"></image>
			   				  <text>尿裤湿巾</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img1.baidu.com/it/u=2967056793,3227243639&fm=253&fmt=auto&app=138&f=JPG?w=500&h=500" mode="widthFix"></image>
			   				  <text>儿童喂养</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img1.baidu.com/it/u=3112272601,1310773497&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=526" mode="widthFix"></image>
			   				  <text>营养辅食</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img2.baidu.com/it/u=2061297060,2078793856&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" mode="widthFix"></image>
			   				  <text>奶粉专区</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img0.baidu.com/it/u=1908517735,3532253772&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260" mode="widthFix"></image>
			   				  <text>儿童寝居</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img2.baidu.com/it/u=841503132,2388613942&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=614" mode="widthFix"></image>
			   				  <text>孕妈专区</text>
			   </navigator>
			   <navigator  class="cate-item" url="../category/category">
			   				  <image src="https://img0.baidu.com/it/u=2628141116,1983027410&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=399" mode="widthFix"></image>
			   				  <text>儿童玩具</text>
			   </navigator>
		</view>
		<!-- 商品 -->
		<view class="goods" >
			<navigator class="goods-item" url="../goods/goods" v-for="(item,index) in goodsList" :key="index">
				<image :src="item.imgs" mode="widthFix"></image>
				<text>{{item.text}}</text>
			</navigator>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			goodsList:[
				{
				imgs:'https://gw.alicdn.com/i1/2937373854/O1CN014SeqiS1eLBCeu6TpF_!!0-item_pic.jpg_Q75.jpg',
				text:'断奶神器，新生婴儿仿真母乳'},
				{
				imgs:'https://gw.alicdn.com/i1/685092642/O1CN01KsVlhB1VO5EEDJiKC_!!0-item_pic.jpg_Q75.jpg',
				 text:'好奇铂金装婴儿纸尿裤M120超薄透气尿不湿宝宝小桃裤'},
				{
				imgs:'https://g-search3.alicdn.com/img/bao/uploaded/i4/i4/94395476/O1CN01PE7jTU1qK3g6ia0Js_!!0-item_pic.jpg_460x460Q90.jpg_.webp',
				text:'笛莎童装女童2023年春季新款女宝宝小女孩儿童学院风长袖西装套装'},
				{
				imgs:'https://gw.alicdn.com/imgextra/i4/2453825852/O1CN01vOyiJi1t6GZGr6Omz_!!2453825852.jpg_110x10000Q75.jpg_.webp',
				text:'世喜安抚奶嘴儿0到一36个月一岁以上新生的婴儿胀防硅胶慰超软气'},
				
			]
			};
		}
	}
</script>

<style lang="scss" scoped>

// 分类区域
.category{
	// border: 1px solid #ccc;
	background-color: #fff;
	border-radius: 3px;
	display: flex;
	width: 98%;
	margin:2px auto;
	flex-wrap: wrap;
	.cate-item{
		// 图片
		image{
			width: 25px;
			margin-bottom: 10px;
			border-radius: 50%;
		}
		text{
			font-size: 10px;
			font-weight: 600;
		}
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 18%;
		margin: 3px;
		height: 80px;
		// background-color: pink;
	}
}
// 商品介绍区域
.goods{
	// box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	.goods-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 3px;
		width: 46%;
		border-radius: 3px;
		border: 1px solid #ccc;
		// background-color: pink;
		height: 200px;
		image{
			width: 95%;
			margin-bottom: 10px;
		}
		text{
			font-size: 12px;
			width: 100%;
			margin: 0 auto;
			margin-left: 6px;
			
			// 文字过长省略
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		&:hover{
			box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
		}
	}
}
</style>
